<template>
    <div>
        <!-- 标题文字 -->
        <div class="header">
            <h1>云上企业数字化智慧系统服务平台</h1>
        </div>
        <!-- 登录表单 -->
        <div class="login-form">
            <el-image :src="require('@/assets/start.png')" style="width: 100%; height: 100%;"></el-image>
            <div style="height: 20px"></div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item label="" prop="account">
                    <el-input v-model="ruleForm.account" style="font-size: 16px;" placeholder="请填写账号">
                        <template slot="prepend"><i class="el-icon-user-solid"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input v-model="ruleForm.password" style="font-size: 16px;" placeholder="请填写密码" show-password>
                        <template slot="prepend"><i class="el-icon-s-ticket"></i></template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item>
                    <el-button type="primary" style="width: 100%; font-size: 16px;" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
            <p>Copyright &copy; 云上企业数字化智慧系统</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表单
            ruleForm: {
                account: '',
                password: ''
            },
            // 表单规则
            rules: {
                account: [
                    {required: true, message: '请输入账户名', trigger: 'blur'},
                    {pattern: /^1[3-9]\d{9}$/, message: '账户名格式不正确', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {pattern: /^[a-zA-Z0-9]{4,8}$/, message: '密码格式不正确,位数包含4-8位，只能是数字和字母混合组成必须至少包含一个数字和字母', trigger: 'blur'}
                ]
            }
        };
    },
    mounted() {
        let that = this;
        that.$http('/user/tokenTimeout', 'POST', null,(resp)=>{
            let data = resp.data;
            if(data.code === 20000){
                if(data.ttl>0){
                    if(localStorage.getItem("token") != null){
                        this.$router.push({name:'start'});
                    }
                }
            }
        });
    },
    methods: {
        // 提交表单
        submitForm(formName) {
            let that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.$http('/user/login', 'POST', that.ruleForm,(resp)=>{
                        let data = resp.data;
                        if(data.code === 20000){
                            this.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            let token = data.token;
                            let permissions = data.permissions;
                            localStorage.setItem("token", token);
                            localStorage.setItem("permissions", permissions);
                            localStorage.setItem("userId",data.id);
                            //跳转到工作台页面
                            setTimeout(()=>{that.$router.push({name:'start'});},1200)
                        }
                    });
                }
            });
        }
    }
}
</script>

<style>
body {
    height: 100vh;
    background-image: linear-gradient(to bottom left, #5abae8, #3c4bd2);
    background-repeat: no-repeat;
}

.header {
    width: 600px;
    margin: 60px auto 20px auto;
}

.header h1 {
    text-align: center;
    margin: 30px auto;
    font-size: 32px;
    color: #fff;
}

.login-form {
    background: #fff;
    width: 360px;
    margin: 20px auto;
    padding: 50px 50px 20px 50px;
    border-radius: 10px;
}

.copyright {
    width: 600px;
    margin: 30px auto 30px auto;
}

.copyright p {
    text-align: center;
    font-size: 12px;
    color: #f2f4f9;
}
</style>